<template>
    <div style="margin:10px;">
        <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload"/>
        <div class="panel">
            <div class="panel-title">
                <span v-text="panelTitle"></span>
            </div>
            <div class="panel-body">
                <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
                    <el-table-column v-for="item of tableHeader" :prop="item" :label="item" :key="item"/>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
    import UploadExcelComponent from '@/components/UploadExcel/index.vue'

    export default {
        name: 'UploadExcel',
        components: {UploadExcelComponent},
        data() {
            return {
                panelTitle: '列表',
                tableData: [],
                tableHeader: []
            }
        },
        methods: {
            beforeUpload(file) {
                const isLt1M = file.size / 1024 / 1024 < 1

                if (isLt1M) {
                    return true
                }

                this.$message({
                    message: 'Please do not upload files larger than 1m in size.',
                    type: 'warning'
                })
                return false
            },
            handleSuccess({results, header}) {
                this.tableData = results
                this.tableHeader = header
            }
        }
    }
</script>
